<script lang="ts">
import { defineComponent, h, reactive, UnwrapRef } from 'vue'
import { IconOption } from '@/interface/icon'
import * as Icons from '@ant-design/icons-vue'
import * as IconPark from '@icon-park/vue-next'

export default defineComponent({
  name: 'Icon',
  props: {
    // 共有参数
    mode: { type: String, default: () => 'antd' }, // 可选 park
    type: { type: String, default: () => '', required: true },
    spin: { type: Boolean, default: () => false },
    option: { type: Object, default: () => {} },
    // antd图标参数
    style: { type: Object, default: () => null },
    rotate: { type: Number, default: () => null },
    twoToneColor: { type: String, default: () => '' },
    // icon-park参数
    size: { type: Number, default: () => null },
    theme: { type: Number, default: () => null },
    strokeWidth: { type: Number, default: () => null },
    strokeLinecap: { type: String, default: () => null },
    strokeLinejoin: { type: String, default: () => null },
    fill: { type: String, default: () => null },
  },
  setup(props) {
    const antdKeys: string[] = ['type', 'style', 'rotate', 'twoToneColor', 'spin']
    const parkKeys: string[] = ['size', 'theme', 'strokeWidth', 'strokeLinecap', 'spin']
    const params: UnwrapRef<IconOption> = reactive(props.option || {}) // 最终参数
    let iconCompontent: any = Icons
    let optionKeys: string[] = []
    // 初始化图标库参数
    const initIconFrame = () => {
      switch (props.mode) {
        case 'antd':
          optionKeys = antdKeys
          iconCompontent = Icons
          break
        case 'park':
          optionKeys = parkKeys
          iconCompontent = IconPark
          break
        default:
          optionKeys = antdKeys
          iconCompontent = Icons
      }
    }
    // 标签参数获取
    const setParams = () => {
      optionKeys.forEach((key: string) => {
        if (props[key]) {
          params[key] = props[key]
        }
      })
    }
    initIconFrame()
    setParams()

    return {
      params,
      iconCompontent,
    }
  },
  render() {
    return h(this.iconCompontent[this.type], this.params)
  },
})
</script>
